﻿@model WeddingEventManagementApp.Models.Client_VM
@{
    ViewBag.Title = "New Client";
}

<div class="twelve columns">

    <h3 class="blue-head">Add a New Client</h3>
    @using (Html.BeginForm())
    {
        <div>
            @Html.ValidationSummary(true, "There has been an Error processing your request", new { @class = "no-bullet alert-box alert" })
        </div>

        <div class="twelve columns">
            <div class="row">

                <div class="two columns">
                    <label class="right inline">Name:</label>
                </div>

                <div class="six columns">

                    <div class="row">
                        <div class="six columns">
                            @Html.EditorFor(model => model.FirstName)
                        </div>
                        <div class="six columns">
                            @Html.EditorFor(model => model.LastName)
                        </div>
                    </div>
                </div>

                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.FirstName)
                    @Html.ValidationMessageFor(model => model.LastName)
                </div>

            </div>

            <div class="row">

                <div class="two columns">
                    <label class="right inline">Email:</label>
                </div>

                <div class="six columns">
                    @Html.EditorFor(model => model.Email)
                </div>

                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.Email)
                </div>

            </div>

            <div class="row">
                <div class="two columns">
                    <label class="right inline">Phone:</label>
                </div>

                <div class="ten columns">
                    @Html.Hidden("phonecount", Model != null ? Model.Phones.Count : 0)

                    <div id="phones">
                        @if (Model != null)
                        {
                             for (int i = 0; i < Model.Phones.Count; i++)
                             {
                                 {
                                    @Html.EditorFor(model => model.Phones[i])
                                 }
                             }
                        }
                        else
                        {
                            @Html.EditorFor(model => model.Phones[0])
                        }

                       
		                
                    </div>
                    <a id="addPhone" class="button success small">Add Another Phone</a>
                    <hr/>
                </div>
            </div>

            <div class="row">
                <div class="two columns">
                    <label class="right inline">Location:</label>
                </div>

                <div class="six columns">
                    <div class="row">
                        <div class="twelve columns">
                            @Html.TextBoxFor(model => model.Address, new { placeholder = "Address" })
                        </div>
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.City, new { @class="cmbx", placeholder = "City" })
                        </div>
                        <div class="three columns">
                            @Html.DropDownListFor(model => model.Province,
                                from Province type in Enum.GetValues(typeof(Province))
                                select new SelectListItem() { Text = type.ToString(), Value = ((int)type).ToString() }, new { @class="ddl" })
                        </div>
                        <div class="three columns">
                            @Html.TextBoxFor(model => model.PostalCode, new { placeholder = "Postal Code" })
                        </div>
                    </div>
                </div>

                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.Address)
                    @Html.ValidationMessageFor(model => model.City)
                    @Html.ValidationMessageFor(model => model.PostalCode)
                </div>
            </div>

            <div class="row">
                <div class="two columns">
                    <label class="right inline">Notes:</label>
                </div>

                <div class="six columns">
                    @Html.TextAreaFor(model => model.Notes, new { @rows = "10" })
                </div>
                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.Notes)
                </div>
            </div>

            <div class="row">
                <div class="ten columns offset-by-four">
                    <input type="submit" value="Save Client" class="button text-center" />
                </div>
            </div>
        </div>
    }

</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script src="~/Scripts/jquery.maskedinput-1.3.js"></script>

    <script type="text/javascript">
        $('#PostalCode').mask("a9a 9a9");

        $(".cmbx").kendoComboBox({
            dataSource: {
                type: "json",
                transport: {
                    read: "/Client/Cities"
                }
            }
        });

        var phoneDiv = $('#phones');
        $('#addPhone').click(function () {
            var currentPhoneCount = $('#phonecount').val();
            var html = '<div class="row phone-row"><div class="seven column"><div class="row"><div class="two column mobile-one">'
                + '(<input data-val="true" placeholder="###" data-val-number="The field AreaCode must be a number." data-val-required="The AreaCode field is required." id="Phones_$__AreaCode" name="Phones[$].AreaCode" type="text" value="" maxlength="3" class="three-digits">)'
                + '</div><div class="four column mobile-two">'
                + '<input data-val="true" placeholder="###" data-val-number="The field Exchange must be a number." data-val-required="The Exchange field is required." id="Phones_$__Exchange" name="Phones[$].Exchange" type="text" value="" maxlength="3" class="three-digits">'
                + ' — <input data-val="true" placeholder="####" data-val-number="The field LineNumber must be a number." data-val-required="The LineNumber field is required." id="Phones_$__LineNumber" name="Phones[$].LineNumber" type="text" maxlength="4" value="" class="four-digits">'
                + '</div><div class="two column mobile-one">'
                + 'x <input data-val="true" placeholder="Ext" data-val-number="The field Extension must be a number." id="Phones_$__Extension" name="Phones[$].Extension" placeholder="Ext" type="text" value="" class="extension">'
                + '</div><div class="four column mobile-four">'
                + '<select data-val="true" data-val-required="The PhoneNumberType field is required." id="Phones_$__PhoneNumberType" name="Phones[$].PhoneNumberType" class="ddl"><option value="Business">Business</option>'
                + '<option value="Home">Home</option>'
                + '<option value="Mobile">Mobile</option>'
                + '</select><a href="javascript:void(0)" data-id="$" class="delete-phone icomoon">&#xe060;</a></div></div></div><div class="five column">'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].AreaCode" data-valmsg-replace="true"></span>'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].Exchange" data-valmsg-replace="true"></span>'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].LineNumber" data-valmsg-replace="true"></span>'
                + '<span class="field-validation-valid" data-valmsg-for="Phones[$].Extension" data-valmsg-replace="true"></span>'
                + '</div></div>';
            phoneDiv.append(html.replace(new RegExp("\\$", "g"), ++currentPhoneCount));
            $('#phonecount').val(currentPhoneCount);
        });

        $('#phones').on('click', '.delete-phone', function (e) {
            var row = $(e.target).parentsUntil(".phone-row").parent();
            var r = confirm("Are you sure you want to delete this Phone Number?");
            if (r === true) {
                row.remove();
            }
            else {
                e.preventDefault();
            }

        });
    </script>
}